#include("../layout.html")
#set(PATH='/core/dataset')
#@layout()

#define css()
<link href="#(CTX)/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
#end

#define js()
<!-- Bootstrap table -->
<script src="#(CTX)/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="#(CTX)/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="#(CTX)/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- jquery.form -->
<script src="#(CTX)/js/plugins/form/jquery.form.min.js"></script>

<script>
<!-- 编辑新增对话框js,如有需要请导出到对应的对话框js文件中 -->
var datasetDialog = function(){
    var modal = $('#datasetDialog');
    var saveUrl = _CTX_ + _PATH_ + '/save';
    var form = modal.find("form");
    var _callback;

    var btnSave = modal.find("#btnSave");

    btnSave.click(function(){
        form.ajaxSubmit({
            url:saveUrl,
            type:"POST",
            dataType:"json",
            cache:false,
            success:function(ret){
                if(ret.state == "ok"){
                    if(_callback && typeof(_callback)=='function'){
                        result = _callback(ret);
                        if(typeof(result) == 'undefined' || result != false){
                            modal.modal('hide');
                        }
                    }
                }else{
                    alert(ret.msg);
                }
            }
        });
    });
    
    return {
        show: function (entity, options) {
            if(options.title){
                modal.find(".modal-title").html(options.title);
            }
            if(options && options.callback){
                _callback = options.callback;
            }
            _FormKit_.bindData(form,entity,"entity",options.readOnly);
            modal.modal('show');
        }
    }
    
}();
</script>
<script>
<!-- 页面js,请自行将js内容导出到js文件中 -->
$(document).ready(function () {
    var _listUrl = _CTX_ + _PATH_ + '/list';
    var _batchDeteleUrl = _CTX_ + _PATH_ + '/batchDelete';

    var _bottomHeight = 103;
    var _tableMinHeight = 450;
    var _maxHeight = $container().height();
    var _tableHeight = _maxHeight - $('#table').position().top - _bottomHeight;
    _tableHeight = _tableHeight < _tableMinHeight?_tableMinHeight:_tableHeight;

    $('#table').bootstrapTable({
        url: _listUrl,
        method: 'get',
        queryParams: function () {
            //每次查询时传入后台的查询条件
        },
        height: _tableHeight,
        pagination: true,
        pageNumber: 1,
        pageSize: 20,
        pageList: [20, 50, 100],
        clickToSelect: true,
        search: true,
        searchOnEnterKey: true,
        showRefresh: true,
        toolbar: '#toolbar',
        columns: [{
            checkbox: true
        }, {
            field: 'uuid',
            title: '主键',
            visible: false,
            searchable: false
        }, {
            field: 'label',
            title: '显示名称'
        }, {
            field: 'code',
            title: '编码'
        }, {
            field: 'statement',
            title: '查询名称'
        }, {
            field: 'serial',
            title: '索引'
        }]
    });

    $('#btnAdd').click(function () {
        datasetDialog.show({}, {
            "title": "新增数据集合",
            "callback": function () {
                $('#table').bootstrapTable("refresh");
            }
        });
    });

    $('#btnEdit').click(function () {
        var selections = $('#table').bootstrapTable('getSelections');
        if (selections && selections.length == 1) {
            datasetDialog.show(selections[0], {
                "title": "编辑数据集合",
                "callback": function () {
                    $('#table').bootstrapTable("refresh");
                }
            });
        }else{
            alert("只能选择一个");
        }
    });

    $('#btnDelete').click(function () {
        var selections = $('#table').bootstrapTable('getSelections');
        if (selections) {
            var pkArray = [];
            for(var i in selections){
                pkArray.push(selections[i].uuid);
            }
            $.ajax({
                url: _batchDeteleUrl,
                type: 'POST',
                data: $.param({"uuids": pkArray}, true),
                cache: false,
                dataType: 'json',
                success: function (ret) {
                    if (ret.state == 'ok') {
                        alert("删除成功");
                        $('#table').bootstrapTable('refresh');
                    } else {
                        alert(ret.msg);
                    }
                }
            });
        }
    });

    $(window).bind('resize', function () {
        var _maxHeight = $container().height();
        var _tableHeight = _maxHeight - $('#table').position().top - _bottomHeight;
        _tableHeight = _tableHeight < _tableMinHeight ? _tableMinHeight : _tableHeight;

        $('#table').bootstrapTable("resetView",{height: _tableHeight});
    });

})
</script>
#end

#define content()
<div class="row">
    <div class="col-md-12 col-lg-12">
        <div class="ibox float-e-margins nomargin">
            <div class="ibox-title">
                <h2>数据集合</h2>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <!-- Example Rowstyle -->
                        <div class="example-wrap margin-sm-0">
                            <div class="example">
                                <div id="toolbar" class="btn-group">
                                    <button id="btnAdd" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button id="btnEdit" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </button>
                                    <button id="btnDelete" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                                <table id="table">
                                </table>
                            </div>
                        </div>
                        <!-- End Example Rowstyle -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 编辑新增对话框,如有需要请导出到对应的对话框文件中 -->
<div id="datasetDialog" class="modal inmodal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑数据集合</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form class="form-horizontal" role="form">
                        <div class="col-md-12">

                            <input type="hidden" data-bind id="uuid" name="entity.uuid" />

                            <div class="form-group">
                                <label class="col-sm-3 control-label">显示名称：</label>
                                <div class="col-sm-9">
                                    <input type="text" data-bind class="form-control" id="label" name="entity.label"
                                           placeholder="请输入显示名称">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">编码：</label>
                                <div class="col-sm-9">
                                    <input type="text" data-bind class="form-control" id="code" name="entity.code"
                                           placeholder="请输入编码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">查询语句：</label>
                                <div class="col-sm-9">
                                    <textarea type="text" data-bind class="form-control" rows="5" id="statement" name="entity.statement"
                                              placeholder="请输入查询语句"></textarea>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">索引：</label>
                                <div class="col-sm-9">
                                    <input type="text" data-bind class="form-control" id="serial" name="entity.serial"
                                           placeholder="请输入索引">
                                </div>
                            </div>
                            
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button id="btnSave" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
#end